<div class="attribute color">
    <?php 
        $escaper = new Zend\Escaper\Escaper('utf-8');
    
        // Attribute title
        echo sprintf('<div class="attribute_title">%s</div>', $this->attribute['text']);  
        
        // Selected value
        $defaultFound = false;
        
        foreach ($this->values as $value)
            if ($value['is_default']) {
                echo '<div class="selected_color">';
                echo sprintf('<div class="selected_color_box" style="background-color: %s"></div>', $value['value']);
                echo sprintf('<div class="selected_color_name">%s</div>', $value['text']);
                echo '</div>';
                
                echo sprintf('<input type="hidden" id="color_hidden_input" name="attribute_%s" value="%s">', $this->attribute['id'], $value['id']);
                
                $defaultFound = true;
                break;
            }
            
        // Empty selected value if default was not found
        if (!$defaultFound) {
            echo sprintf('<input type="hidden" id="color_hidden_input" name="attribute_%s">', $this->attribute['id']);
            echo sprintf('<div class="selected_color_box" style="background-color: #FFF"></div>');
        }
        
        // Attribute values
        echo '<div class="color_chooser">';
        
        foreach ($this->values as $value)
           echo sprintf('<div class="color_box" style="background-color: %s" color="%s" text="%s" price="%s" attributeValueId="%s"></div>', $value['value'], 
               $value['value'], $escaper->escapeHtmlAttr($value['text']), $escaper->escapeHtmlAttr($value['price']), $value['id']);
        
        echo '</div>';
    ?>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        $('.color_box').click(function() {
            var selectedColor = $(this);
            
            $('.selected_color_box').css('background-color', selectedColor.attr('color'));
            $('.selected_color_name').text(selectedColor.attr('text'));
            $('#color_hidden_input').val(selectedColor.attr('attributeValueId'));
            
            $(document).trigger('product_attribute_value_changed', [ selectedColor.attr('attributeValueId') ]);
        });
    });
</script>